<template>
	<view class="categroy-container">
		<!-- header区域 -->
		<view class="header">
			<view class="search">
				搜索商品
			</view>
		</view>
		<!-- 内容区域 -->
		<view class="categroy-content">

			<!-- 左边内容 -->
			<view class="left-content">
				<scroll-view scroll-y="true" class="scroll-nav">
					<view class="nav-item " :class="{active:currentIndex===index}" @click="ontoggle(index)"
						v-for="(item,index) in categoryList" :key="item.id">
						{{item.name}}
					</view>

				</scroll-view>
			</view>

			<!-- 右边内容 -->
			<view class="right-content">
				<scroll-view scroll-y="true" class="scroll-right">
					<image class="top-img" :src="cateObj.imgUrl" mode=""></image>
					<view class="column-shop">
						<view class="shop-item" v-for="item in cateObj.subCateList" :key="item.id">
							<image :src="item.wapBannerUrl" mode=""></image>
							<text class="shop-pub">{{item.name}}</text>
						</view>
					</view>

				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import request from '../../utils/request.js'
	export default {
		data() {
			return {
				categoryList: [],
				currentIndex: 0,
			}
		},
		mounted() {
			this.getCategoryData()
		},
		methods: {
			async getCategoryData() {
				let data = await request('/getCategoryData');
				this.categoryList = data;
			},
			ontoggle(index) {
				this.currentIndex = index;
			}
		},
		computed: {
			cateObj() {
				return this.categoryList[this.currentIndex]
			}
		}

	}
</script>

<style lang="scss">
	.categroy-container {
		.header {
			padding: 10rpx 0;

			.search {
				margin: 0 auto;
				width: 95%;
				height: 60rpx;
				line-height: 60rpx;
				border-radius: 999rpx;
				font-size: 28rpx;
				text-align: center;
				background: #eee;
			}
		}

		.categroy-content {
			display: flex;
			border-top: 2rpx solid #D9D9D9;

			.left-content {
				width: 20%;
				height: 100%;
				background:#f5f6f7;

				.scroll-nav {
					height: calc(100vh - 82rpx);

					.nav-item {
						position: relative;
						height: 80rpx;
						line-height: 80rpx;
						text-align: center;
						font-size: 26rpx;

						&.active {
							background: #fff;
							&:before {
								position: absolute;
								top: 10rpx;
								left: 2rpx;
								content: '';
								width: 5rpx;
								height: 60rpx;
								background: red;
							}
						}

					}
				}
			}

			.right-content {
				width: 80%;
				height: 100%;

				.scroll-right {
					height: calc(100vh - 82rpx);

					.top-img {
						display: block;
						margin: 0 auto;
						width: 95%;
						height: 240rpx;
					}
					.column-shop{
						display: flex;
						flex-wrap: wrap;
						text-align: center;
						.shop-item{
							margin: 20rpx 0;
							width: 33.33%;
							image{
								width: 100%;
								height: 140rpx;
							}
							.shop-pub{
								font-size: 26rpx;
							}
						}
					}
				}
			}
		}
	}
</style>
